<script setup lang="ts">
import { regOrLoginApi } from "@/api/user";
import { useUserStore } from "@/store/modules/user.store";
const userStore = useUserStore();

const checked = ref(false);

const toggleChecked = () => {
  checked.value = !checked.value;
};

const toAgreement = () => {
  uni.showToast({
    title: "用户协议",
    icon: "none"
  });
};

const toPrivacy = () => {
  uni.showToast({
    title: "隐私权政策",
    icon: "none"
  });
};

const beforeGetPhoneNumber = () => {
  if (!checked.value) {
    uni.showToast({
      title: "请先阅读并同意相关协议",
      icon: "none"
    });
  }
};

const wxLogin = () => {
  return new Promise((resolve) => {
    uni.login({
      provider: "weixin",
      success: (res) => {
        if (res.errMsg === "login:ok") {
          resolve(res.code);
        } else {
          resolve("");
        }
      },
      fail: () => {
        resolve("");
      }
    });
  });
};

const getPhoneNumber = async (e: any) => {
  if (e.detail?.errMsg === "getPhoneNumber:ok" && e.detail?.code) {
    const login_code = await wxLogin();
    const phone_code = e.detail?.code;
    if (!login_code || !phone_code) {
      uni.showToast({
        title: "授权失败",
        icon: "none"
      });
      return;
    }
    const { success, data } = await regOrLoginApi(login_code as string, phone_code);
    if (success) {
      userStore.user = {
        ...data,
        isLogin: true
      };
      await uni.showToast({
        title: "授权成功",
        icon: "success"
      });
      uni.navigateTo({
        url: "/package/mine/info"
      });
    }
  }
};
</script>
<template>
  <view class="content">
    <view class="app-logo">
      <u-image
        src="https://bbl-1329058988.cos.ap-beijing.myqcloud.com/stick/assets/app_logo.jpg"
        width="200rpx"
        height="200rpx"
      ></u-image>
    </view>
    <view class="app-title">球杆定制</view>
    <view class="agreement-box">
      <view class="checkbox-container" @click="toggleChecked">
        <view class="checkbox" :class="{ checked }">
          <u-icon
            name="checkbox-mark"
            :color="checked ? 'rgb(60, 197, 31)' : 'transparent'"
            size="12"
          ></u-icon>
        </view>
        <text class="mintext">登录代表您同意</text>
      </view>
      <text class="agreement-text mintext" @click.stop="toAgreement">《用户协议》</text>
      <text class="mintext">,</text>
      <text class="agreement-text mintext" @click.stop="toPrivacy">《隐私权政策》</text>
    </view>
    <view class="login-btn">
      <template v-if="checked">
        <u-button
          open-type="getPhoneNumber"
          type="success"
          @click="beforeGetPhoneNumber"
          @getphonenumber="getPhoneNumber"
          >手机号快捷登录</u-button
        >
      </template>
      <template v-else>
        <u-button type="success" @click="beforeGetPhoneNumber">手机号快捷登录</u-button>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
.content {
  padding: 0;
  .app-logo {
    display: flex;
    justify-content: center;
    padding-top: 15vh;
  }
  .app-title {
    font-size: 45rpx;
    text-align: center;
  }
  .agreement-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 60rpx 0;

    .checkbox-container {
      display: flex;
      align-items: center;
    }

    .checkbox {
      width: 30rpx;
      height: 30rpx;
      box-sizing: border-box;
      border-radius: 3px;
      border: 2rpx solid #8f8f94;
      margin-right: 10rpx;
      transition: all 0.3s ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;
      &.checked {
        border-color: rgb(60, 197, 31);
      }
    }

    .agreement-text {
      color: rgb(60, 197, 31);
    }

    .mintext {
      font-size: 24rpx;
    }
  }

  .login-btn {
    padding: 0 50rpx;
  }
}
</style>
